<template>
    <div class=" flex-1">
        <section class="flex-1 goods-detail">
            <div class="flex-column">
                <van-swipe :autoplay="3000" indicator-color="white" class="goods-bg">
                    <van-swipe-item v-for="(image, index) in goodsDetail.imgs" :key="index">
                        <img :src="image"/>
                    </van-swipe-item>
                </van-swipe>
                <div class="goods-h-msg flex-1 plr15 ptb10">
                    <h3 class="goods-title">{{goodsDetail.name}}</h3>
                    <div class="goods-price">
                        商城价:<span class="mall-price price">
                            ¥ <em>{{goodsDetail.sku_flag?computePrice(defaultSku.price):computePrice(goodsDetail.price)}}</em></span>
                        <s class="old-price price" v-if="goodsDetail.old_price!=0">¥ <em>{{computePrice(goodsDetail.old_price)}}</em></s>
                        &nbsp;<span>市场价:<s class="marker-price price">¥ <em>{{goodsDetail.sku_flag?computePrice(defaultSku.mark_price):computePrice(goodsDetail.mark_price)}}</em></s></span>
                    </div>
                    <p class="goods-shop flex-row">店铺：{{goodsDetail.shopName}}</p>
                    <div class="goods-sell flex-row">
                        <span>累计销量 <em>{{goodsDetail.sale_num}}</em></span>
                        <span>库存 <em>{{goodsDetail.sku_flag?defaultSku.store:goodsDetail.store}}</em> </span>
                        <span>累计评价 <em>{{goodsDetail.cm_total}}</em></span>
                    </div>
                </div>
            </div>
            <van-cell title="规格" class="mtb10" @click.native="popupSku = true">
                <van-icon slot="right-icon" name="arrow" class="custom-icon flex-row"/>
            </van-cell>
            <van-tabs v-model="active" sticky>
                <van-tab title="商品详情">
                    <div class="desc-main plr15 ptb10" v-html="goodsDetail.descs"></div>
                </van-tab>
                <van-tab title="全部评价">
                    <div class="goods-evaluate">
                        <ul class="ptb10 evaulate-box">
                            <li v-for="item in evaluateList " class="plr15 ptb10 evaulate-item">
                                <div class="evaulate-head flex-row">
                                    <span>{{item.user_name}}</span>
                                    <span>{{item.createTime|transformTimestamp}}</span>
                                </div>
                                <p class="evaulate-msg">{{item.msg}}</p>
                            </li>
                        </ul>
                    </div>
                </van-tab>
            </van-tabs>
        </section>

        <van-goods-action>
            <van-goods-action-mini-btn
                icon="cart-o"
                text="购物车"
                :info="cartNum?cartNum:''"
                @click="$router.push({name:'shopping'})"/>
            <van-goods-action-big-btn
                text="加入购物车"
                @click="popupSku = true"/>
        </van-goods-action>
        <sku-selector
            v-model="popupSku"
            :choseDesc=sku
            @on-confirm="onChoseSku"
            :choseSpec="defaultSku">
        </sku-selector>
    </div>
</template>

<script>
    import skuSelector from "../../components/SkuSelector"
    import {mapGetters} from "vuex"

    export default {
        name: "GoodsDetail",
        data() {
            return {
                goodsDetail: {},
                popupSku: false,
                sku: {},
                defaultSku: {},
                active: 0,
                evaluateList: []
            }
        },
        components: {'sku-selector': skuSelector},
        computed: {
            ...mapGetters(['cartNum'])
        },
        created() {
            this.getGoodsDetail()
        },
        methods: {
            getGoodsDetail() {
                let goodsId = this.$route.query.id
                this.$store.dispatch(types.GET_GOODS_DETAIL, {id: goodsId}).then(res => {
                    console.log(res)
                    if (res.code !== 0) return
                    this.goodsDetail = res.data
                    this.sku = {
                        title: this.goodsDetail.name,
                        desc: this.goodsDetail.skus,
                        goods_id: this.goodsDetail.id,
                        img: this.goodsDetail.img,
                        price: this.goodsDetail.price,
                        mark_price: this.goodsDetail.mark_price,
                        store: this.goodsDetail.store
                    }
                    if (this.goodsDetail.skus) {
                        this.defaultSku = this.goodsDetail.skus[0]
                    }
                    this.getGoodsEvaluate()
                })
            },

            //sku回掉
            onChoseSku(data) {
                this.onAddCart(data)
            },
            //获取商品评论列表
            getGoodsEvaluate() {
                this.$store.dispatch(types.GET_GOODS_EVALUATE, {id: 65}).then(res => {
                    if (res.code !== 0) return
                    this.evaluateList = res.data
                })
            },
            onAddCart(data) {
                console.log(data)
                this.$store.dispatch(types.CART_ADD, data).then(res => {
                    console.log(res)
                    if (res.code !== 0) return
                    this.success('添加成功')
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .goods-detail {
        padding-bottom: 50px;
        overflow: auto;
    }

    .goods-bg {
        width: 100%;
        height: 375px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .goods-title {
        font-size: 18px;
        font-weight: bold;
    }

    .goods-h-msg {
        background: #fff;
    }

    .goods-shop {
        font-size: 12px;
        height: 25px;
    }

    .mall-price {
        color: $theme-color;
        margin-right: 10px;
    }

    .mall-price em {
        font-size: 20px;
    }

    .old-price {
        color: #666;
        margin-right: 20px;
    }

    .marker-price {
        color: #666;
    }

    .goods-desc {
        height: 100px;
        width: 100%;
        background: #fff;
        h3 {
            border-bottom: 1px solid #efefef;
            height: 40px;
        }
    }

    .custom-icon {
        display: flex !important;
    }

    .evaulate-box {
        background: #fff;
    }

    .evaulate-item {
        border-bottom: 1px solid #efefef;
        &:last-child {
            border-bottom: 0;
        }
    }

    .goods-evaluate {
        padding-bottom: 50px;
    }

    .evaulate-msg {
        padding-top: 10px;
        font-size: 14px;
    }

</style>
